<template>
  <!-- TreeSelect做侧边栏 -->
  <van-tree-select height="auto" :items="items" :main-active-index.sync="active">
    <template #content>
      <!-- 切换展示图片 -->
      <van-image v-if="active === 0" src="https://pic3.zhimg.com/80/v2-4dfe02ce45e134fade570b1e01abebe2_720w.webp" />
      <van-image v-if="active === 1" src="https://pic3.zhimg.com/80/v2-db93e8cc5f92ecef7f737810c60705ee_720w.webp" />
      <van-image v-if="active === 2" src="https://pic2.zhimg.com/80/v2-66e3597ccd852334e56686b0f4a3ac69_720w.webp" />
      <van-image v-if="active === 3" src="https://pic1.zhimg.com/80/v2-25ea5d5e9355ac6510ddd4ab7d4af9e4_720w.webp" />
      <van-image v-if="active === 4" src="https://pic2.zhimg.com/80/v2-af5ee87d7662d7ff03febfaf1cf0c62d_720w.webp" />
      <van-image v-if="active === 5" src="https://pic2.zhimg.com/80/v2-8d0aff23ddafbe11a345767b4f8936d1_720w.webp" />
      <van-image v-if="active === 6" src="https://pic3.zhimg.com/80/v2-6b8e351a1043023cdd580c1e2cc3a06a_720w.webp" />
      <!-- 切换介绍文字 -->
      <p v-if="active === 0">{{ Sduantan }}</p>
      <p v-if="active === 1">{{ Schangtan }}</p>
      <p v-if="active === 2">{{ Sfangtan }}</p>
      <p v-if="active === 3">{{ Shuantan }}</p>
      <p v-if="active === 4">{{ Sbiantan }}</p>
      <p v-if="active === 5">{{ Swentan }}</p>
      <p v-if="active === 6">{{ Skuoren }}</p>

    </template>
  </van-tree-select>
</template>

<script>
import { mapState } from 'vuex';
export default {
  // 标签
  data() {
    return {
      active: 0,
      items: [{ text: '短镡' }, { text: '长镡' }, { text: '方镡' }, { text: '环镡' }, { text: '扁镡' },
      { text: '文镡' }, { text: '阔刃' }],
    };
  },
  // 用vuex导入介绍文字
  computed: {
    ...mapState(['Sduantan', 'Schangtan', 'Sfangtan', 'Shuantan', 'Sbiantan', 'Swentan', 'Skuoren'])
  }
};
</script>